<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Example ul element</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <div id="main">
    <div class="container-fluid machine-contents">
      <draggable :list="jobs" :options="{animation:150}" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
        <transition-group :name="!drag? 'list-complete' : null" :css="true">
          <div v-for="(job, index) in jobs" :key="job.jobNumber" class="list-complete-item">
            <div>
              {{ job.jobNumber }}
            </div>
            <div>
              <br>
              <button v-on:click="removeJob(index)">Remove</button>
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>
     <button v-on:click="add">Add</button>
  </div>
  <script type="text/javascript" src="libs\vue\dist\vue.js"></script>
  <script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
  <script type="text/javascript" src="src\vuedraggable.js"></script>
  <script type="text/javascript" src="script\transition2.js"></script>
</body>

</html>